<template>
  <v-container>
    <v-row>
      <v-col>
        <v-card>
          <v-card-text>
            目标：商场收银软件，营业员根据客户所购买的商品单价和数量，向客户收费。
            商场有打折活动所有商品打指定折扣
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
    <v-row>
      <v-col>
        <v-card>
          <v-card-title>
            商场收银软件 V1.1
          </v-card-title>
          <v-card-text class="mt-2">
            <v-row>
              <v-col cols="12" md="6">
                <v-text-field
                  type="number"
                  label="单价"
                  prefix="￥"
                  v-model="currentPrice"
                />
              </v-col>
              <v-col cols="12" md="6">
                <v-text-field type="number" label="数量" v-model="currentNum" />
              </v-col>
              <v-col cols="12">
                <v-select :items="cbxItems" label="折扣" v-model="selectCBX" />
              </v-col>
              <v-col cols="12">
                <v-textarea
                  readonly
                  rows="5"
                  label="显示信息"
                  outlined
                  no-resize
                  v-model="outString"
                />
              </v-col>
              <v-col cols="12" class="text-h5"> 总计：{{ totalPrice }} </v-col>
            </v-row>
          </v-card-text>
          <v-card-actions>
            <v-btn class="primary" outlined dark @click="onSaveClick"
              >保存</v-btn
            >
            <v-btn class="secondary" outlined dark>重置</v-btn>
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component({})
export default class PageV2 extends Vue {
  // region Prop
  // endregion
  // region Data
  currentPrice = 0.0;
  currentNum = 0;
  outString = "";
  totalPrice = 0;
  cbxItems = ["正常收费", "打八折", "打七折", "打五折"];
  selectCBX = "";
  // endregion
  // region computed
  // endregion
  // region watch
  // endregion
  // region method
  onSaveClick() {
    let cbx = 0;
    console.log(this.selectCBX);
    switch (this.selectCBX) {
      case this.cbxItems[0]:
        cbx = 1;
        break;
      case this.cbxItems[1]:
        cbx = 0.8;
        break;
      case this.cbxItems[2]:
        cbx = 0.7;
        break;
      case this.cbxItems[3]:
        cbx = 0.5;
        break;
    }
    const currentTotalPrice = this.currentPrice * this.currentNum * cbx;
    this.totalPrice = currentTotalPrice + this.totalPrice;

    this.outString += `单价：${this.currentPrice}  数量：${this.currentNum}  ${this.selectCBX}  合计：${currentTotalPrice} \n`;
  }
  // endregion
  // region hook
  // endregion
}
</script>

<style lang="scss"></style>
